<template>
  <div> 
    <meta-header :metaInfo="{ title: '用户管理' }"></meta-header>
    <div class="head">
      <n-button type="info" @click="showAdd()"> 添加 </n-button>
      <label v-if="!isModalComponent">
        <n-input v-model:value="search.name" @keydown.enter="searchData()" clearable />
        <n-button type="info" @click="searchData()" > 搜索 </n-button>
      </label>
    </div>

    <n-space class="table-data-space" vertical>
      <n-spin :show="tableLoading">
      <n-table striped :single-line="false">
        <thead>
          <tr>
            <th>
              <n-checkbox v-model:checked="tableAll" :indeterminate="tableIndeterminate"
                  @click.stop="toggleCkeckAll()" />
            </th>
            <th>用户名</th>
            <th>昵称</th>
            <!-- <th>邮箱</th> -->
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row,index in datas" :key="index">
            <td><n-checkbox v-model:checked="tableCheckList[index]" /></td>
            <td> {{row.username}} </td>
            <td> {{row.name}} </td>
            <!-- <td> {{row.email}} </td> -->
            <td> {{userStatus(row.status)}} </td>
            <td> 
              <n-button strong secondary type="info"  @click="showEdit(row)" size="small">编辑</n-button>
              <n-button strong secondary type="info"  @click="editRole(row)" size="small">角色</n-button>
              <n-button strong secondary type="warning"  @click="showResetPwd(row)" size="small">重置密码</n-button>
              <n-button strong secondary type="error" v-if="row.status != 'delete'" 
               @click="deleteVo(row)" size="small">删除</n-button>  
            </td>
          </tr>
        </tbody>
      </n-table>

      <n-pagination
        v-if="tablePage.total > tablePage.size"
        v-model:page="tablePage.page"
        v-model:page-size="tablePage.size"
        :item-count="tablePage.total"

        :mask-closable="false"
        show-size-picker
        :page-slot="5"
        :page-sizes="pageSizeOption"
        :on-update:page="pageChange"
        :on-update:page-size="pageSizeChange"
      />
      </n-spin>
    </n-space>

    <n-modal v-model:show="showModal" preset="dialog" :mask-closable="false">
          <template #header>
            <div> {{isEdit ? '编辑' : '添加' }} </div>
          </template>
          <div>
              <n-form ref="dialogForm" :model="dialogForm" :rules="rules">
                  <n-form-item path="id" label="ID" v-if="isEdit">
                    <n-input type="text" v-model:value="dialogForm.id" placeholder="用户id" :disabled="true" />
                  </n-form-item>
                  <n-form-item path="username" label="用户名">
                    <n-input type="text" v-model:value="dialogForm.username" placeholder="请输入用户名" :disabled="isEdit" />
                  </n-form-item>
                  <n-form-item path="name" label="昵称">
                    <n-input type="text" v-model:value="dialogForm.name" placeholder="请输入昵称" />
                  </n-form-item>
                  <n-form-item path="password" label="密码" v-if="!isEdit">
                    <n-input type="password" v-model:value="dialogForm.password" placeholder="初始密码" />
                  </n-form-item>
                  <n-form-item path="status" label="状态">
                    <n-select v-model:value="dialogForm.status"
                      filterable placeholder="状态" :options="statusOptions" />
                  </n-form-item>

                  <!--
                  <n-form-item path="email" label="邮箱">
                    <n-input type="text"  v-model:value="dialogForm.email" placeholder="请输入邮箱" />
                  </n-form-item>
                  -->
              </n-form>
          </div>
          <template #action>
            <n-button type="primary" v-if="!isEdit" @click="saveVo()" :disabled="dialogFormSaving"> 添加 </n-button>
            <n-button type="primary" v-else @click="updateVo()" :disabled="dialogFormSaving"> 更新 </n-button>
            <n-button type="warning" @click="close()" :disabled="dialogFormSaving"> 取消 </n-button>
          </template>
    </n-modal>
    

    <n-modal v-model:show="roleDialog.visible" preset="dialog" :mask-closable="false"
      style="width: 40em">
          <template #header>
            <div> 用户角色 </div>
          </template>
            <UserRoleSelector class="dialog-content-inner" ref="roleSelector"></UserRoleSelector>
          <template #action>
              <n-button type="primary" @click="saveRole()" :disabled="roleDialog.saving"> 保存角色 </n-button>
              <n-button type="warning" @click="closeRole()" :disabled="roleDialog.saving"> 取消 </n-button>
          </template>
    </n-modal>
    <!-- <RoleSelector ref="roleSelector" ></RoleSelector> -->

    <n-modal v-model:show="resetPwd.visible" preset="dialog" :mask-closable="false">
      <template #header>
        <div> 重置密码 </div>
      </template>
      <template v-if="resetPwd.obj">
        <n-form ref="changePwdForm" :model="resetPwd" :rules="resetPwdRules">
          <!-- <n-form-item path="id" label="ID" v-if="isEdit">
            <n-input type="text" v-model:value="dialogForm.id" placeholder="用户id" :disabled="true" />
          </n-form-item> -->
          <n-form-item path="username" label="用户名">
            <n-input type="text" v-model:value="resetPwd.obj.username" placeholder="请输入用户名" disabled />
          </n-form-item>
          <n-form-item path="password" label="新密码" >
            <n-input type="password" v-model:value="resetPwd.password" placeholder="新密码" />
          </n-form-item>
        </n-form>
      </template>
      <template #action>
        <!-- <label style="margin-top: 20px;"> -->
          <n-button type="error" @click="saveChangePassword()" :disabled="resetPwd.saving"> 修改 </n-button>
          <n-button type="warning" @click="closeResetPwd()" :disabled="resetPwd.saving"> 取消 </n-button>
        <!-- </label> -->
      </template>
    </n-modal>

  </div>
</template>

<script src="./user.js">
</script>

<style lang="scss" scoped>
@import '/src/assets/css/manage.scss';

.dialog-content-inner{
  margin-top: 10px;
  margin-bottom: 50px;
}

// .dialog-content-div{
//   min-height:100px;
//   width:400px;
// }
</style>